﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/tundra/tundra.css" />
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css" />
    <style>
        html, body, #mapDiv {
            padding: 0;
            margin: 0;
            width:100%; 
            height: 100%;
        }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script type="text/javascript">
        var map;
        require(["esri/map", "esri/layers/ArcGISTiledMapServiceLayer", "dojo/string", "dojo/domReady!"],
            function (Map, ArcGISTiledMapServiceLayer, string) {
                
                map = new Map("mapDiv", {
                    logo: false
                });
                var agoServiceURL = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer";
                agoLayer = new ArcGISTiledMapServiceLayer(agoServiceURL);
                map.addLayer(agoLayer);

                map.on('mouse-move', showCoordinates);
                map.on('mouse-drag', showCoordinates);                

                function showCoordinates(event) {
                    var level = map.getLevel();
                    var pres = Math.min(6, level);
                    var x = event.mapPoint.x.toFixed(pres);
                    var y = event.mapPoint.y.toFixed(pres);
                    document.getElementById('mapPosition').innerHTML = string.substitute('${0}, ${1}', [x, y]);
                }

            });
    </script>
</head>
<body class="tundra">
    <div id="mapDiv">
        <div id="mapPosition" style="background-color:whitesmoke; font-weight:bolder; font-size:smaller; position:absolute; padding:3px;left:30px; bottom:6px; z-index:99;"></div>
    </div>
</body>
</html>
